<template>
  <div class="app-container course-container">
    <div class="course-header">
      <h2 class="page-title">
        <i class="el-icon-video-camera"></i>
        知识课程
      </h2>
      <p class="page-desc">精选优质农业课程，助力农业知识传播</p>
    </div>

    <div class="course-content">
      <el-row :gutter="24">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(course, index) in courseList" :key="index">
          <div class="course-card">
            <div class="course-image">
              <img :src="course.image" :alt="course.title" />
              <div class="course-duration">{{ course.duration }}</div>
              <div class="course-badge" v-if="course.isHot">
                <i class="el-icon-star-on"></i>
                热门
              </div>
            </div>
            <div class="course-info">
              <h3 class="course-title">{{ course.title }}</h3>
              <div class="course-meta">
                <span class="course-author">
                  <i class="el-icon-user"></i>
                  {{ course.author }}
                </span>
              </div>
              <p class="course-desc">{{ course.description }}</p>
              <div class="course-footer">
                <div class="course-stats">
                  <span class="stat-item">
                    <i class="el-icon-view"></i>
                    {{ course.viewCount }}
                  </span>
                  <span class="stat-item">
                    <i class="el-icon-chat-line-round"></i>
                    {{ course.commentCount }}
                  </span>
                </div>
                <div class="course-price">
                  <span v-if="course.price === 0" class="free">免费</span>
                  <span v-else class="price">¥{{ course.price }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Course',
  data() {
    return {
      courseList: [
        {
          title: '现代农业种植技术',
          author: '张教授',
          image: 'https://via.placeholder.com/300x200',
          duration: '2小时30分',
          description: '深入讲解现代农业种植技术，包括高效栽培、病虫害防治等核心内容',
          viewCount: 12560,
          commentCount: 320,
          price: 0,
          isHot: true
        },
        {
          title: '有机农业实践指南',
          author: '李博士',
          image: 'https://via.placeholder.com/300x200',
          duration: '3小时15分',
          description: '全面介绍有机农业的种植方法、认证流程和市场需求分析',
          viewCount: 8920,
          commentCount: 245,
          price: 99,
          isHot: true
        },
        {
          title: '智慧农业与物联网',
          author: '王研究员',
          image: 'https://via.placeholder.com/300x200',
          duration: '2小时45分',
          description: '学习如何运用物联网技术实现农业生产的智能化管理',
          viewCount: 15680,
          commentCount: 456,
          price: 0,
          isHot: false
        },
        {
          title: '农业病虫害防治',
          author: '赵高级农艺师',
          image: 'https://via.placeholder.com/300x200',
          duration: '2小时',
          description: '系统讲解常见病虫害的识别、预防和治理方法',
          viewCount: 11230,
          commentCount: 289,
          price: 79,
          isHot: false
        },
        {
          title: '农产品品牌营销',
          author: '刘专家',
          image: 'https://via.placeholder.com/300x200',
          duration: '1小时45分',
          description: '掌握农产品品牌打造和市场营销策略，提升产品竞争力',
          viewCount: 7680,
          commentCount: 198,
          price: 0,
          isHot: false
        },
        {
          title: '农业机械操作与维护',
          author: '陈农艺师',
          image: 'https://via.placeholder.com/300x200',
          duration: '2小时20分',
          description: '学习农业机械的正确操作方法和日常维护保养技巧',
          viewCount: 9450,
          commentCount: 234,
          price: 0,
          isHot: true
        },
        {
          title: '土壤改良技术',
          author: '周农技专家',
          image: 'https://via.placeholder.com/300x200',
          duration: '1小时50分',
          description: '了解土壤改良的重要性，学习实用的改良方法和技巧',
          viewCount: 6780,
          commentCount: 167,
          price: 0,
          isHot: false
        },
        {
          title: '农业金融与保险',
          author: '孙教授',
          image: 'https://via.placeholder.com/300x200',
          duration: '2小时10分',
          description: '了解农业金融政策、贷款申请和农业保险相关知识',
          viewCount: 8230,
          commentCount: 201,
          price: 0,
          isHot: false
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.course-container {
  background: #f0f2f5;
  padding: 24px;
  
  .course-header {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    padding: 40px 32px;
    border-radius: 12px;
    margin-bottom: 24px;
    color: #fff;
    box-shadow: 0 4px 20px rgba(245, 87, 108, 0.3);
    
    .page-title {
      font-size: 32px;
      font-weight: 600;
      margin: 0 0 12px 0;
      display: flex;
      align-items: center;
      gap: 12px;
      
      i {
        font-size: 36px;
      }
    }
    
    .page-desc {
      font-size: 16px;
      margin: 0;
      opacity: 0.9;
    }
  }
  
  .course-content {
    .course-card {
      background: #fff;
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 24px;
      transition: all 0.3s ease;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
      cursor: pointer;
      
      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
      }
      
      .course-image {
        position: relative;
        width: 100%;
        height: 200px;
        overflow: hidden;
        
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.3s ease;
        }
        
        &:hover img {
          transform: scale(1.1);
        }
        
        .course-duration {
          position: absolute;
          bottom: 8px;
          right: 8px;
          background: rgba(0, 0, 0, 0.7);
          color: #fff;
          padding: 4px 8px;
          border-radius: 4px;
          font-size: 12px;
        }
        
        .course-badge {
          position: absolute;
          top: 8px;
          right: 8px;
          background: #ff6b6b;
          color: #fff;
          padding: 4px 10px;
          border-radius: 4px;
          font-size: 12px;
          display: flex;
          align-items: center;
          gap: 4px;
        }
      }
      
      .course-info {
        padding: 20px;
        
        .course-title {
          font-size: 18px;
          font-weight: 600;
          color: #303133;
          margin: 0 0 12px 0;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        
        .course-meta {
          margin-bottom: 12px;
          
          .course-author {
            font-size: 13px;
            color: #909399;
            display: flex;
            align-items: center;
            gap: 4px;
          }
        }
        
        .course-desc {
          font-size: 13px;
          color: #606266;
          line-height: 1.6;
          margin: 0 0 16px 0;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        
        .course-footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-top: 16px;
          border-top: 1px solid #f0f2f5;
          
          .course-stats {
            display: flex;
            gap: 16px;
            
            .stat-item {
              font-size: 12px;
              color: #909399;
              display: flex;
              align-items: center;
              gap: 4px;
              
              i {
                color: #409EFF;
              }
            }
          }
          
          .course-price {
            .free {
              color: #67C23A;
              font-weight: 600;
              font-size: 16px;
            }
            
            .price {
              color: #ff6b6b;
              font-weight: 600;
              font-size: 18px;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .course-container {
    padding: 16px;
    
    .course-header {
      padding: 24px 20px;
      
      .page-title {
        font-size: 24px;
      }
    }
  }
}
</style>